<template>
	<view>
		<nav-bars :bgColor="scrollData >= 60 ? '#fff' : ''" title="基本信息"></nav-bars>
		<view class="gradient_top"></view>
		<view class="loan">
			<view class="loanNav">您的装修贷已发放，请及时核对</view>
			<view class="loanLine"></view>
			<view class="loanView">
				<view class="loanItem" v-for="(item, index) in list" :key="index">
					<view class="loanTopView">
						<view class="loanTop">
							<view class="loanImage"><image :src="item.type == 1 ? baseImg + '/static/loan/yuxin.png' : baseImg + '/static/loan/build.png'" mode=""></image></view>
							<view class="loanName">{{ item.name }}</view>
						</view>
						<view v-if="item.status == 1" class="loanStatusfail">审核通过，待放款</view>
						<view v-if="item.status == 2" class="loanStatus">放款中</view>
						<view v-if="item.status == 3" class="loanStatus">已放款</view>
					</view>
					<view class="loanBottom">
						<view class="loanBottomleft">
							<view class="loanBottomPirce">
								<text>￥</text>
								{{ item.pirce }}
							</view>
							<view class="loanBottomTime">放款时间：{{ item.time }}</view>
						</view>
						<view class="loanBottomBtn">查看详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			scrollData: 0,
			baseImg: 'https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com',
			list: [
				{ name: '宇鑫金融', status: 1, type: 1, pirce: 69000, path: '', time: '2021-10-1' },
				{ name: '建设银行', status: 2, type: 2, pirce: 69000, path: '', time: '2021-9-1' },
				{ name: '宇鑫金融', status: 3, type: 1, pirce: 69000, path: '', time: '2021-9-1' }
			]
		};
	},
	onPageScroll(e) {
		this.scrollData = e.scrollTop;
	},
	methods: {}
};
</script>
<style lang="scss">
page {
	background: #f5f5f5;
}

.gradient_top {
	width: 100%;
	height: 60rpx;
	// position: relative;
	z-index: -1;
	overflow: hidden;
}

.gradient_top::after {
	content: '';
	width: 100%;
	height: 492rpx;
	position: absolute;
	left: 0%;
	top: 0;
	z-index: -1;
	// border-radius: 0 0 50% 50%;
	// background: #ddc8a8;
	background-image: url(https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/head.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.loan {
	padding: 0 35rpx;
	.loanNav {
		font-size: 36rpx;
		font-weight: bold;
		color: #402200;
		margin-bottom: 16rpx;
	}
	.loanLine {
		width: 40rpx;
		height: 3rpx;
		background: #402200;
		margin-bottom: 24rpx;
	}
	.loanView {
		.loanItem {
			margin-bottom: 24rpx;
			background: #ffffff;
			box-shadow: 0rpx 2rpx 14rpx 0rpx #f1f1f1;
			border-radius: 16rpx;
			padding: 44rpx 39rpx;
			.loanTopView {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.loanTop {
					display: flex;
					align-items: center;
					.loanImage {
						width: 44rpx;
						height: 44rpx;
					}
					.loanName {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
						margin-left: 15rpx;
					}
				}
				.loanStatusfail {
					background: #fff3f2;
					border-radius: 22rpx;
					padding: 10rpx 20rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #c2382b;
				}
				.loanStatus {
					background: #fafafa;
					border-radius: 22rpx;
					padding: 10rpx 20rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #888888;
				}
			}
			.loanBottom {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				.loanBottomleft {
					margin-top: 30rpx;
					.loanBottomPirce {
						font-size: 48rpx;
						font-weight: 800;
						color: #3c3630;
						text {
							font-size: 30rpx;
							font-weight: 800;
							color: #3c3630;
						}
					}
					.loanBottomTime {
						font-size: 22rpx;
						font-weight: 500;
						color: #888888;
						margin-top: 10rpx;
					}
				}
				.loanBottomBtn {
					background: linear-gradient(216deg, rgba(195, 171, 124, 0.94), rgba(227, 210, 175, 0.94));
					border-radius: 39rpx;
					padding: 12rpx 20rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #402200;
				}
			}
		}
	}
}
</style>
